<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单支付</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{../../static/img/index/bitbug_favicon.ico}"/>
    <link rel="stylesheet" th:href="@{../../static/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{../../static/css/user/pay.css}"/>
    <link rel="stylesheet" th:href="@{../../static/css/user/set.css}"/>
    <script th:src="@{../../static/js/jquery-2.1.0.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{../../static/js/bootstrap.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{../../static/js/pay.js}" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<!--首页头部-->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <a href="#" style="font-size: 30px; font-family:'楷体';">宠物商城</a>
            </li>
            <li th:if="${session.login_user!=null}">
                <a href="#" th:text="'欢迎您 :'+${session.login_user.getUsername()}"></a>
            </li>
            <li th:if="${session.login_user!=null}">
                <a th:href="@{'/user/set/'+${session.login_user.getId()}}">个人中心</a>
            </li>
        </ul>
    </div>
</nav>
<div class="container">
    <div class="panel panel-primary accept">
        <div class="panel-heading">
            <h5>收货地址</h5>
        </div>
        <div class="panel-body">
            <!--邮件地址:postid是自定义属性，用来记录id-->
            <div class="col-lg-3" th:each="addinfo:${addinfos}" th:attr="postid=${addinfo.getId()}">
                <div class="panel panel-warning panel_address"
                     th:classappend="${addinfo.getDefaultadd()=='1'}?'panel-danger'">
                    <div class="panel-heading">
                        <h5 th:text="${addinfo.getName()}"></h5>
                    </div>
                    <div class="panel-body">
                        <p th:text="${addinfo.getMobile()}"></p>
                        <p th:text="${addinfo.getProvince()}"></p>
                        <p th:text="${addinfo.getCity()}"></p>
                        <p th:text="${addinfo.getCounty()}"></p>
                        <p th:text="${addinfo.getAddress()}"></p>
                    </div>
                </div>
            </div>

            <div class="col-lg-12">
                <hr class="divider"/>
            </div>
            <div class="col-lg-12">
                <a th:href="@{/user/addManage}">管理地址</a>
            </div>
        </div>
    </div>
</div>
<!--结算订单-->
<div class="container">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h4>订单详情</h4>
        </div>
        <div class="panel-body" id="oderInfo" th:attr="orderid=${oderinfo.getId()}">
            <!--订单图片-->
            <img th:src="${product.getCover()}" alt="" class="pull-left"/>
            <!--订单商品名-->
            <p class="pull-left pro_name">
                <a th:href="@{'/product/detail/'+${product.getId()}}" th:text="${product.getProname()}">阿凡达释放更多复古风德国和风格化风格化进口衣服</a>
            </p>
            <p class="pull-left pro_price">
                ￥ <span th:text="${product.getNewprice()}">99.5</span>
            </p>
            <p class="pull-left">
                数量 :<span th:text="${oderinfo.getCounts()}">6</span>
            </p>
            <p class="pull-left pro_price">
                总价 :<span th:text="${oderinfo.getTotalPrice()}">496.5</span> 元
            </p>
            <p class="pull-right">
                <input class="form-control" id="note" placeholder="买家留言">
            </p>
        </div>
    </div>
    <p class="pull-right">
        <button class="btn btn-danger">提交订单</button>
    </p>
</div>
</body>
<script>
    $(function () {
        $('.panel_danger').click(function () {
            $.ajax({
                url: "/oder/pay",
                type: 'post',
                async: true,
                dataType: 'json',
                data: {
                    'id': $('#oderInfo').attr("orderid"),
                    'note': $('#note').val(),
                    'addressid': $('.panel-danger').parent().attr("postid")
                },
                success: function (data) {
                    if (data == "000") {
                        alert("支付成功");
                        window.location.replace("/user/set");
                    }
                }
            })
        })
    })
</script>
</html>